<template>
  <!-- 条件筛选 -->
  <div class="page_filter">
    <!-- 搜索框 -->
    <organization-unit style="width: 400px;" v-model="proxyDeptTreeId" @clear="clearBaseUnitId()"     @change="baseUnitSelectList()" :changeOnSelect='true' placeholder="选择管理单位" custom-class="board_select"  popper-class="board_select-pop"></organization-unit>

    <el-select v-model="proxyBaseUnitId" clearable placeholder="选择基础单元" filterable @change="changeRoad()" class="board_select" popper-class="board_select-pop">
      <el-option
        v-for="item in baseUnitList"
        :key="item.id"
        :label="item.roadName"
        :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import {baseUnitSelectList} from '@/services/model/pipeline'
import OrganizationUnit from '@/components/organization-unit/all'
export default {
  props: ['deptTreeId', 'baseUnitId'],
  components: { OrganizationUnit },
  data () {
    return {
      baseUnitList: [],
      bidSlopeList: [],
      form:{
        deptTreeId:'',
        roadId:'',
        slopeId:'',
        projectId:''
      }
    }
  },
  computed: {
    proxyDeptTreeId: {
      get () {
        return this.deptTreeId
      },
      set (value) {
        this.$emit('update:deptTreeId', value)
        this.form.deptId = value
      }
    },
    proxyBaseUnitId: {
      get () {
        return this.baseUnitId
      },
      set (value) {
        this.$emit('update:baseUnitId', value)
        this.form.baseUnitId = value
      }
    },
  },
  methods: {


    //获取项目列表
    async baseUnitSelectList() {
      this.proxyBaseUnitId=''
      this.baseUnitList=[]
      const {data} = await baseUnitSelectList({deptTreeId:this.proxyDeptTreeId})
      this.baseUnitList = data
      this.$emit('changeRoad')
    },
    changeRoad() {
      this.$emit('changeRoad')
    },

  },
  mounted() {
  }
}
</script>
<style lang="less">
@import url('./init-ele-input.less');
</style>

<style lang="less" scoped>
    // select
    @select-bk: #212946;
    @select-hover: #2E3963;
    @select-choose: #547AFF;
    @select-disabled: #6F7798;
    @select-group-title: #727E9D;
    @select-group-border: #252E4E;
    @select-item-span:#D2D7ED;
    @select-choose: #5065b1;
  // select
  .board_select-pop.el-popper {
    .el-select-dropdown__item  {
      background-color: @select-bk;
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
      background-color: @select-hover;
    }
    .el-select-dropdown__item.selected span,
    .el-select-dropdown__item.selected {
      color: @select-choose;
    }
    .el-select-group__title {
      color: @select-group-title;
    }
    .el-select-dropdown__item.is-disabled {
      color: @select-disabled;
    }
    .el-select-group__wrap::after {
      background-color: @select-group-border;
    }
    .el-select-dropdown__item span{
      color: @select-item-span;
    }
  }

  .board_select .el-input.is-focus .el-input__inner {
    border-color: @select-choose;
  }

  .board_select {
    margin-left: 10px;
    .is-focus .el-input__suffix .el-icon-arrow-up{
      color: @select-choose;
    }
  }

  .page_filter {
    display: inline-block;
    position: absolute;
    left: 32%;
    top: 11%;
    z-index: 2;
  }
</style>
